<template>
	<div>
		<section class="header text-center">
		<nav class="navbar navbar-expand-lg navbar-custom">
			<div class="container"><a class="navbar-brand" href="/"><i class="fas fa-shopping-bag primary-color mr-1"></i>{{ $t('m.index') }}</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-1" aria-controls="navbar-1" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
				<div class="collapse navbar-collapse pull-xs-right justify-content-end" id="navbar-1">
					<ul class="navbar-nav mt-2 mt-md-0">
						<li class="nav-item active"><a class="nav-link" href="#">{{$t('m.home')}} <span class="sr-only">(current)</span></a></li>
						<li class="nav-item dropdown mega-menu"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.shop')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown">
								<div class="container">
									<div class="divider"></div>
									<div class="row">
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.women')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.men')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.girl')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-2">
											<h6 class="text-uppercase">{{$t('m.shopdict.boy')}}</h6>
											<ul class="nav flex-column">
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
												<li class="nav-item"><a class="nav-link" href="#">Link item</a></li>
											</ul>
										</div>
										<div class="col-md-4">
											<h6 class="text-uppercase">Featured Items</h6>
											<div class="row">
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
												<div class="col-6 text-center"><a href="item.html">
													<img src="images/placeholder-product.jpg" alt="" class="img-fluid mt-2 mb-3"></a>
													<h6 class="mb-0"><a href="item.html">Product Name</a></h6>
													<p><span class="emphasis">$49.00</span></p>
													<a href="#" class="btn btn-sm btn-outline-secondary mt-0">Buy Now</a>
										</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</li>
						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{$t('m.pages')}} </a>
							<div class="dropdown-menu" aria-labelledby="navbarDropdown"><a class="dropdown-item" href="index.html">{{$t('m.pagesdict.homepage')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="catalog.html">{{$t('m.pagesdict.catalog')}}</a>
								<a class="dropdown-item" href="item.html">{{$t('m.pagesdict.itemdetail')}}</a>
								<a class="dropdown-item" href="cart.html">{{$t('m.pagesdict.cart')}}</a>
								<div class="dropdown-divider"></div>
								<a class="dropdown-item" href="contact.html">{{$t('m.pagesdict.contact')}}</a>

							</div>
						</li>
						<li class="nav-item"><a class="nav-link" href="contact.html">{{$t('m.pagesdict.contact')}}</a></li>
					<!-- <li class="nav-item dropdown"><input type="text" /></li> -->

						<!--检索功能-->

						<Search @search="search" v-model="text" ></Search>



						<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-shopping-cart"></i> <span class="badge badge-pill badge-primary">3</span></a>
							<div class="dropdown-menu dropdown-menu-right dropdown-cart" aria-labelledby="navbarDropdown">
								<h6>3 Items <span class="emphasis">$147.00</span></h6>
								<div class="dropdown-divider"></div>
								<ul class="shopping-cart-items">
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
									<li class="row">
										<div class="col-3">
											<img src="images/placeholder-product.jpg" width="60">
										</div>
										<div class="col-9">
											<h6><a href="item.html">Product Name</a></h6>
											<span class="text-muted">1x</span>
											<span class="emphasis">$49.00</span></div>
									</li>
								</ul>
								
								<a href="cart.html" class="btn btn-lg btn-full-width btn-primary" style="margin: 0;">View Cart</a></div>
						</li>
					</ul>
				</div>
			</div>
			<div v-if="username==''">

				<router-link to='/login' >{{ $t('m.login') }}</router-link>
				<router-link to='/register' >{{ $t('m.register') }}</router-link>

			

			</div>

			<div v-else>
				
				{{ $t('m.welcome') }}:<router-link to="/myprofiles">{{ username}}</router-link>

				&nbsp;&nbsp;

				<Button @click="logout " color="black">{{ $t('m.logout') }}</Button>

			</div>
			<div>

				<!--中英切换开关-->

				<h-switch @change="lang_change" v-model="lang" >{{ $t('m.chinese') }}/{{ $t('m.english') }}</h-switch>

			</div>
			<div>

				<!--白昼与暗夜模式开关-->

				<h-switch @change="change_back" v-model="anye">{{ $t('m.daytime') }}/{{ $t('m.night') }}</h-switch>

			</div>
		</nav>
	</section>

	


	</div>
</template>


<script>

	export default{
		//定义数据
		data(){

			return {

				//关键词变量
				text:'',

				//用户名
				username:'',
				//中英文切换
				lang:1,

				//暗夜默认变量
				anye:1,
				


			}


		},
		
		//在当前页面  检索功能如何实现
		//监听属性  检索页面变化   
		watch:{
			$route(to,from){

				//手动刷新页面
				this.$router.go(0);
			}

		},


		//钩子方法 
		mounted:function(){

			//调用暗夜方法
			this.ifanye();


			// this.iflang();


			//接收钉钉三方参数
			var ding_nick = this.$route.query.ding_nick;
			
			//接收微博第三方参数
			var sina_id = this.$route.query.sina_id;
			var user_id = this.$route.query.uid;

			if(ding_nick){
				//钉钉id存储
				localStorage.setItem('username',ding_nick)
			}


			if(sina_id){
				//自动帮用户进行登录操作
				localStorage.setItem("username",sina_id);
				localStorage.setItem("uid",user_id);
			}


			//判断是否登录
			var uname = localStorage.getItem('username')

			if(uname==null){

				//没登陆
				this.username = '';

			}else{

				//登录
				this.username = uname; 
			}


		},
		methods:{

			//检索方法
			search:function(){

				//获取输入的关键词
				console.log(this.text);

				//进行跳转操作 带着检索关键字跳转
				this.$router.push({path:'/search',query:{text:this.text}});

			},

			ifanye(){

				var backanye = localStorage.getItem('backanye')

				if(backanye != '1'){
					this.anye = 0;
					this.change_back()


				}

				},


				  //切换主题颜色
			change_back:function(){

				//白昼模式

				//获取样式表
				var styles = getComputedStyle(document.documentElement);

				if(this.anye == 1){

					//动态更改
					document.documentElement.style.setProperty("--bg-color","white");

					//字体颜色
					document.documentElement.style.setProperty("--a-color","black");

					localStorage.setItem('backanye','1')


				}else{

					//暗夜模式

					//动态更改
					document.documentElement.style.setProperty("--bg-color","#292a2d");

					//字体颜色
					document.documentElement.style.setProperty("--a-color","white");

					localStorage.setItem('backanye','0')
				}

			








	  		},

			//判断语言
			// iflang:function(){

			// 	var lang_locale = localStorage.getItem("lang");

			// 	if(lang_locale){

			// 		this.$i18n.locale = lang_locale;

			// 		if(lang_locale == 'zh'){

			// 			this.lang = 1;

			// 		}else{
			// 			this.lang = 0;
			// 		}

			// 	}else{

			// 		this.$i18n.locale = 'zh';
			// 		this.lang = 1;
			// 	}

			// },

			//切换语言
			lang_change:function(){

				console.log(this.lang);

				if(this.lang == true){

					//中文
					this.$i18n.locale = "zh";
					localStorage.setItem("lang",'zh');

				}else{

					//英文
					this.$i18n.locale = "en";
					localStorage.setItem("lang",'en');


				}

			},
			//登出
			logout:function(){
				//删除用户信息  removeItem删除指定信息 clear()可以全部删除
				localStorage.removeItem("username")

				//删除之后 跳转到登陆页面
				this.username = "";
				this.$router.push('/login');

			}
			
		}
	
	

	}

</script>


<style>



</style>
